<template>
  <div class="service-detail">
    <!-- 顶部服务基本信息 -->
   <section class="service-info">
      <div class="service-header">
        <div class="service-image">
          <img :src="service.image" :alt="service.name">
        </div>
        <div class="service-brief">
          <h1>{{ service.name }}</h1>
          <div class="brief-info">
            <div class="rating">
              <span class="score">{{ service.rating }}分</span>
              <span class="sales">已售 {{ service.salesCount }}</span>
            </div>
            <div class="price">¥{{ service.price }}</div>
          </div>
          <div class="service-tags">
            <span v-for="tag in service.tags" :key="tag" class="tag">{{ tag }}</span>
          </div>
        </div>
      </div>
    </section>

    <!-- 内容标签页 -->
    <div class="content-tabs">
      <div class="tab-header">
        <div 
          v-for="tab in tabs" 
          :key="tab.key"
          :class="['tab-item', { active: currentTab === tab.key }]"
          @click="currentTab = tab.key"
        >
          {{ tab.name }}
        </div>
      </div>

      <!-- 服务详情 tab -->
      <div v-show="currentTab === 'detail'" class="tab-content">
        <div class="service-desc">
          <h3>服务介绍</h3>
          <p>{{ service.description }}</p>
        </div>
        <div class="service-tags">
          <span v-for="tag in service.tags" :key="tag" class="tag">{{ tag }}</span>
        </div>
      </div>

      <!-- 评价 tab -->
      <div v-show="currentTab === 'reviews'" class="tab-content">
    <div class="rating-summary">
      <div class="rating-left">
        <div class="total-score">{{ service.rating }}</div>
        <div class="rating-text">综合评分</div>
      </div>
      <div class="rating-right">
        <div class="rating-tags">
          <span 
            v-for="tag in ratingTags" 
            :key="tag.name"
            :class="['rating-tag', { active: tag.active }]"
            @click="filterByTag(tag)"
          >
            {{ tag.name }}({{ tag.count }})
          </span>
        </div>
      </div>
    </div>

    <!-- 评价列表 -->
    <div class="review-list">
      <div v-for="review in commentReviews " :key="review.id" class="review-item">
        <!-- 主评论 -->
        <div class="review-main">
          <div class="review-header">
            <div class="user-info">
              <img :src="review.userAvatar" alt="用户头像">
              <div class="user-detail">
                <div class="username">{{ review.userName }}</div>
                <div class="review-time">{{ review.createTime }}</div>
              </div>
            </div>
            <div class="review-rating">
              <span class="stars">★★★★★</span>
              <span class="score">{{ review.rating }}分</span>
            </div>
          </div>
          
          <div class="review-content">{{ review.content }}</div>
          
          <div class="review-images" v-if="review.images?.length">
            <img 
              v-for="(img, index) in review.images" 
              :key="index" 
              :src="img" 
              @click="previewImage(review.images, index)"
            >
          </div>

          <div class="review-actions">
            <span @click="likeReview(review)">
              <i class="icon-like"></i>
              {{ review.likes }}
            </span>
            <span @click="showReplyInput(review)">
              <i class="icon-comment"></i>
              回复
            </span>
          </div>

          <!-- 商家回复 -->
          <div class="merchant-reply" v-if="review.merchantReply">
            <div class="reply-header">商家回复：</div>
            <div class="reply-content">{{ review.merchantReply }}</div>
          </div>

          <!-- 二级评论 -->
          <div class="sub-reviews" v-if="review.subReviews?.length">
            <div 
              v-for="subReview in review.subReviews" 
              :key="subReview.id" 
              class="sub-review-item"
            >
              <span class="sub-username">{{ subReview.userName }}</span>
              <span class="sub-content">{{ subReview.content }}</span>
            </div>
            
            <div class="show-more" v-if="review.subReviews.length > 2">
              查看更多回复 >
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

      <!-- 相关推荐 tab -->
      <div v-show="currentTab === 'related'" class="tab-content">
        <div class="related-list">
          <div v-for="item in relatedServices" 
               :key="item.id" 
               class="related-item"
               @click="goToService(item.id)">
            <img :src="item.image" :alt="item.name">
            <div class="item-info">
              <h3>{{ item.name }}</h3>
              <p>¥{{ item.price }}</p>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 底部预约按钮 -->
    <div class="booking-action">
      <button class="book-btn" @click="handleBooking">立即预约</button>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()
const router = useRouter()

// 标签页配置
const tabs = [
  { key: 'detail', name: '服务详情' },
  { key: 'reviews', name: '用户评价' },
  { key: 'related', name: '相关推荐' }
]
const currentTab = ref('detail')

// 服务详情数据
const service = ref({
  name: '精油按摩',
  price: 299,
  description: '专业精油按摩服务，舒缓压力...',
  tags: ['精油按摩', '减压', '专业'],
  rating: 4.8,
  image: 'https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/a31e0b12-14e4-4ace-837e-81c452c3b766.jpeg'
})

const reviews = ref([])
const relatedServices = ref([])

// 处理预约
const handleBooking = () => {
  router.push(`/booking/${route.params.id}`)
}

// 跳转到其他服务
const goToService = (id) => {
  router.push(`/service/${id}`)
}
// 添加评价相关数据
const ratingTags = ref([
  { name: '全部', count: 100, active: true },
  { name: '好评', count: 90, active: false },
  { name: '有图', count: 30, active: false },
  { name: '服务好', count: 45, active: false },
  { name: '环境好', count: 28, active: false }
])

const commentReviews = ref([
  {
    id: 1,
    userName: '用户名',
    userAvatar: 'https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/9a16b616-50ed-48c3-82b9-82aa8ee3bd51.jpg',
    rating: 5,
    content: '服务非常好，环境很舒适...',
    createTime: '2024-01-15',
    likes: 12,
    images: ['https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/9a16b616-50ed-48c3-82b9-82aa8ee3bd51.jpg', 'https://cyj456.oss-cn-hangzhou.aliyuncs.com/clock/user/avatar/9a16b616-50ed-48c3-82b9-82aa8ee3bd51.jpg'],
    merchantReply: '感谢您的好评，欢迎下次光临',
    subReviews: [
      {
        id: 11,
        userName: '其他用户',
        content: '请问效果怎么样？'
      },
      {
        id: 12,
        userName: '楼主',
        content: '效果很不错，推荐尝试'
      }
    ]
  }
  // ... 更多评价数据
])

// 点赞评论
const likeReview = (review) => {
  review.likes++
}

// 显示回复输入框
const showReplyInput = (review) => {
  // 实现回复逻辑
}

// 图片预览
const previewImage = (images, index) => {
  // 实现图片预览逻辑
}

// 筛选评价
const filterByTag = (tag) => {
  ratingTags.value.forEach(t => t.active = false)
  tag.active = true
  // 实现筛选逻辑
}
</script>

<style scoped>
.service-detail {
  min-height: 100vh;
  background: #f5f5f5;
}

.service-info {
   background: #fff;
  padding: 20px 15px;
  width: 80%;          /* 设置宽度为80% */
  margin: 0 auto;      /* 居中显示 */
  box-sizing: border-box;
}

.service-image {
  width: 120px;
  height: 120px;
  flex-shrink: 0;
}

.service-image img {
   width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 8px;
}

.service-brief {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.service-brief h1 {
  font-size: 18px;
  margin: 0;
  line-height: 1.4;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.brief-info {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 8px 0;
}

.rating {
  font-size: 14px;
}

.score {
  color: #ff4d4f;
  margin-right: 10px;
}

.sales {
  color: #999;
}

.price {
  color: #ff4d4f;
  font-size: 20px;
  font-weight: bold;
}

.service-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}
.service-header {
  display: flex;
  gap: 15px;
}

.service-header h1 {
  font-size: 20px;
  margin-bottom: 10px;
}

.price {
  color: #ff4d4f;
  font-size: 24px;
  font-weight: bold;
}

.content-tabs {
  margin-top: 10px;
  background: #fff;
}

.tab-header {
  display: flex;
  border-bottom: 1px solid #eee;
}

.tab-item {
  flex: 1;
  text-align: center;
  padding: 15px 0;
  color: #666;
  position: relative;
}

.tab-item.active {
  color: #ff4d4f;
}

.tab-item.active::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 40px;
  height: 2px;
  background: #ff4d4f;
}

.tab-content {
  padding: 15px;
  min-height: 300px;
}

.booking-action {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 10px 15px;
  background: #fff;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.1);
}

.book-btn {
  width: 100%;
  padding: 12px;
  background: #ff4d4f;
  color: #fff;
  border: none;
  border-radius: 4px;
  font-size: 16px;
}

.review-item {
  padding: 15px 0;
  border-bottom: 1px solid #eee;
}

.related-list {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 15px;
}

.tag {
  font-size: 12px;
  padding: 2px 8px;
  background: #f5f5f5;
  border-radius: 4px;
  color: #666;
}
.rating-summary {
  display: flex;
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.rating-left {
  text-align: center;
  padding-right: 15px;
  border-right: 1px solid #eee;
}

.total-score {
  font-size: 28px;
  color: #ff4d4f;
  font-weight: bold;
}

.rating-right {
  flex: 1;
  padding-left: 15px;
}

.rating-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.rating-tag {
  padding: 4px 8px;
  border-radius: 15px;
  background: #f5f5f5;
  font-size: 12px;
  color: #666;
  cursor: pointer;
}

.rating-tag.active {
  background: #fff2f0;
  color: #ff4d4f;
}

.review-item {
  padding: 15px;
  border-bottom: 1px solid #eee;
}

.review-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 10px;
}

.user-info {
  display: flex;
  align-items: center;
  gap: 10px;
}

.user-info img {
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

.user-detail {
  display: flex;
  flex-direction: column;
}

.username {
  font-weight: 500;
}

.review-time {
  font-size: 12px;
  color: #999;
}

.review-rating .stars {
  color: #ffd700;
  margin-right: 5px;
}

.review-content {
  margin: 10px 0;
  line-height: 1.6;
}

.review-images {
  display: flex;
  gap: 8px;
  margin: 10px 0;
}

.review-images img {
  width: 80px;
  height: 80px;
  object-fit: cover;
  border-radius: 4px;
}

.review-actions {
  display: flex;
  gap: 15px;
  margin: 10px 0;
  color: #666;
  font-size: 14px;
}

.review-actions span {
  cursor: pointer;
}

.merchant-reply {
  margin: 10px 0;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.reply-header {
  color: #666;
  font-size: 14px;
  margin-bottom: 5px;
}

.sub-reviews {
  margin-top: 10px;
  padding: 10px;
  background: #f5f5f5;
  border-radius: 4px;
}

.sub-review-item {
  margin: 5px 0;
  font-size: 14px;
}

.sub-username {
  color: #1890ff;
  margin-right: 5px;
}

.show-more {
  color: #1890ff;
  font-size: 14px;
  margin-top: 8px;
  cursor: pointer;
}
</style>